<template>
  <!-- //组件的结构 -->
  <div class="demo">
    <p>学校名称：{{name}}</p>
    <p>学校地址：{{addr}}</p>
    <button @click="showName">点我提示学校名字</button>
    <Student></Student>
  </div>
</template>
<script>
  //组件交互相关的代码(数据、方法等等)
  /**
   * 1、分别暴露 export const school = Vue.extend(options) (引入的时候：import {xx} from xxx)
   * 2、统一暴露 export {school} (引入的时候：import {xx} from xxx)
   * 3、默认暴露 export default school  (引入的时候：import xx from xxx)
  */
  import Student from './Student';
  export default {
    name:"School",
    data(){
      return{
        name:"MEO",
        addr:"上海"
      }
    },
    components:{
      Student
    },
    methods: {
      showName(){
        alert(this.name)
      }
    },
  }
</script>
<style>
  /* 组件的样式 */
  .demo{
    background-color: aqua;
  }
</style>
